<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">医生详情</view>
            <view class="right">
                <u-icon name="share" size="32" color="#333" @click="handleShare"></u-icon>
            </view>
        </view>
        
        <!-- 医生信息 -->
        <scroll-view class="detail-scroll" scroll-y>
            <view class="detail-container">
                <!-- 基本信息 -->
                <view class="basic-card">
                    <view class="avatar-box">
                        <image class="avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
                        <view class="status" :class="doctorInfo.status"></view>
                    </view>
                    
                    <view class="info">
                        <view class="name-box">
                            <text class="name">{{doctorInfo.name}}</text>
                            <text class="title">{{doctorInfo.title}}</text>
                        </view>
                        
                        <view class="hospital">{{doctorInfo.hospital}}</view>
                        
                        <view class="tags">
                            <view class="tag" v-for="(tag, index) in doctorInfo.tags" :key="index">
                                <text>{{tag}}</text>
                            </view>
                        </view>
                    </view>
                    
                    <view class="action">
                        <view class="btn" :class="{'disabled': doctorInfo.status === 'offline'}" @click="startConsultation">
                            <text>{{doctorInfo.status === 'online' ? '立即咨询' : '离线'}}</text>
                        </view>
                    </view>
                </view>
                
                <!-- 专业介绍 -->
                <view class="intro-card">
                    <view class="header">
                        <text class="title">专业介绍</text>
                    </view>
                    
                    <view class="content">
                        <view class="intro-item" v-for="(item, index) in doctorInfo.intro" :key="index">
                            <view class="label">{{item.label}}</view>
                            <view class="value">{{item.value}}</view>
                        </view>
                    </view>
                </view>
                
                <!-- 评价统计 -->
                <view class="stats-card">
                    <view class="header">
                        <text class="title">评价统计</text>
                    </view>
                    
                    <view class="content">
                        <view class="stat-item">
                            <text class="value">{{doctorInfo.consultCount}}</text>
                            <text class="label">咨询量</text>
                        </view>
                        <view class="stat-item">
                            <text class="value">{{doctorInfo.goodRate}}%</text>
                            <text class="label">好评率</text>
                        </view>
                        <view class="stat-item">
                            <text class="value">{{doctorInfo.responseTime}}分钟</text>
                            <text class="label">平均响应</text>
                        </view>
                    </view>
                </view>
                
                <!-- 患者评价 -->
                <view class="review-card">
                    <view class="header">
                        <text class="title">患者评价</text>
                        <text class="more" @click="viewAllReviews">查看全部</text>
                    </view>
                    
                    <view class="content">
                        <view class="review-item" v-for="(item, index) in doctorInfo.reviews" :key="index">
                            <view class="user">
                                <image class="avatar" :src="item.userAvatar" mode="aspectFill"></image>
                                <view class="info">
                                    <text class="name">{{item.userName}}</text>
                                    <text class="time">{{item.time}}</text>
                                </view>
                            </view>
                            
                            <view class="rating">
                                <u-rate :value="item.rating" disabled></u-rate>
                            </view>
                            
                            <view class="content">{{item.content}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import request from '@/util/request'
import { mapState } from 'vuex'

export default {
    data() {
        return {
            doctorInfo: {
                id: 1,
                name: '张医生',
                title: '主任医师',
                hospital: '北京协和医院',
                avatar: '/static/images/doctor1.png',
                status: 'online',
                tags: ['神经内科', '脑卒中', '高血压'],
                consultCount: 1234,
                goodRate: 98,
                responseTime: 5,
                intro: [
                    {
                        label: '专业领域',
                        value: '神经内科、脑血管病、脑卒中预防与治疗'
                    },
                    {
                        label: '个人简介',
                        value: '从事神经内科临床工作20年，擅长脑血管病、脑卒中的预防与治疗，在国内外核心期刊发表论文30余篇。'
                    },
                    {
                        label: '学术成就',
                        value: '中国医师协会神经内科医师分会委员\n北京市神经内科学会常委\n获得国家科技进步奖二等奖'
                    }
                ],
                reviews: [
                    {
                        userName: '王先生',
                        userAvatar: '/static/images/user1.png',
                        time: '2024-03-20',
                        rating: 5,
                        content: '张医生非常专业，解答问题很耐心，给了我很多有用的建议。'
                    },
                    {
                        userName: '李女士',
                        userAvatar: '/static/images/user2.png',
                        time: '2024-03-19',
                        rating: 5,
                        content: '医生很负责任，回复及时，解释得很清楚，非常感谢！'
                    }
                ]
            }
        }
    },
    computed: {
        ...mapState(['userInfo']),
        userAvatar() {
            return this.userInfo.avatar || '/static/images/default-avatar.png'
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        handleShare() {
            uni.showToast({
                title: '分享功能开发中',
                icon: 'none'
            })
        },
        startConsultation() {
            if (this.doctorInfo.status === 'offline') {
                uni.showToast({
                    title: '医生当前不在线',
                    icon: 'none'
                })
                return
            }
            
            uni.navigateTo({
                url: `/pages/consultation/chat?id=${this.doctorInfo.id}`
            })
        },
        viewAllReviews() {
            uni.showToast({
                title: '查看全部评价功能开发中',
                icon: 'none'
            })
        }
    },
    onLoad(options) {
        // 这里应该根据options.id获取医生详细信息
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .detail-scroll {
        height: calc(100vh - 100rpx);
        
        .detail-container {
            padding: 30rpx;
            
            .basic-card {
                background-color: #fff;
                border-radius: 20rpx;
                padding: 30rpx;
                margin-bottom: 30rpx;
                display: flex;
                
                .avatar-box {
                    position: relative;
                    width: 120rpx;
                    height: 120rpx;
                    margin-right: 30rpx;
                    
                    .avatar {
                        width: 100%;
                        height: 100%;
                        border-radius: 60rpx;
                    }
                    
                    .status {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 20rpx;
                        height: 20rpx;
                        border-radius: 10rpx;
                        border: 4rpx solid #fff;
                        
                        &.online {
                            background-color: #52c41a;
                        }
                        
                        &.offline {
                            background-color: #999;
                        }
                    }
                }
                
                .info {
                    flex: 1;
                    
                    .name-box {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10rpx;
                        
                        .name {
                            font-size: 32rpx;
                            font-weight: bold;
                            color: #333;
                            margin-right: 20rpx;
                        }
                        
                        .title {
                            font-size: 24rpx;
                            color: #1890FF;
                            background-color: #e6f7ff;
                            padding: 4rpx 12rpx;
                            border-radius: 4rpx;
                        }
                    }
                    
                    .hospital {
                        font-size: 24rpx;
                        color: #666;
                        margin-bottom: 20rpx;
                    }
                    
                    .tags {
                        display: flex;
                        flex-wrap: wrap;
                        
                        .tag {
                            margin-right: 20rpx;
                            margin-bottom: 10rpx;
                            
                            text {
                                font-size: 24rpx;
                                color: #666;
                                background-color: #F7F7FA;
                                padding: 4rpx 12rpx;
                                border-radius: 4rpx;
                            }
                        }
                    }
                }
                
                .action {
                    display: flex;
                    align-items: center;
                    margin-left: 30rpx;
                    
                    .btn {
                        width: 160rpx;
                        height: 60rpx;
                        background-color: #1890FF;
                        border-radius: 30rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        
                        text {
                            font-size: 24rpx;
                            color: #fff;
                        }
                        
                        &.disabled {
                            background-color: #ccc;
                            opacity: 0.6;
                        }
                    }
                }
            }
            
            .intro-card {
                background-color: #fff;
                border-radius: 20rpx;
                padding: 30rpx;
                margin-bottom: 30rpx;
                
                .header {
                    margin-bottom: 30rpx;
                    
                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                    }
                }
                
                .content {
                    .intro-item {
                        margin-bottom: 30rpx;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        .label {
                            font-size: 28rpx;
                            color: #333;
                            font-weight: bold;
                            margin-bottom: 10rpx;
                        }
                        
                        .value {
                            font-size: 24rpx;
                            color: #666;
                            line-height: 1.6;
                            white-space: pre-line;
                        }
                    }
                }
            }
            
            .stats-card {
                background-color: #fff;
                border-radius: 20rpx;
                padding: 30rpx;
                margin-bottom: 30rpx;
                
                .header {
                    margin-bottom: 30rpx;
                    
                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                    }
                }
                
                .content {
                    display: flex;
                    justify-content: space-around;
                    
                    .stat-item {
                        text-align: center;
                        
                        .value {
                            font-size: 36rpx;
                            color: #333;
                            font-weight: bold;
                            margin-bottom: 10rpx;
                        }
                        
                        .label {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }
            }
            
            .review-card {
                background-color: #fff;
                border-radius: 20rpx;
                padding: 30rpx;
                
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 30rpx;
                    
                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                    }
                    
                    .more {
                        font-size: 24rpx;
                        color: #1890FF;
                    }
                }
                
                .content {
                    .review-item {
                        margin-bottom: 30rpx;
                        padding-bottom: 30rpx;
                        border-bottom: 2rpx solid #F7F7FA;
                        
                        &:last-child {
                            margin-bottom: 0;
                            padding-bottom: 0;
                            border-bottom: none;
                        }
                        
                        .user {
                            display: flex;
                            align-items: center;
                            margin-bottom: 20rpx;
                            
                            .avatar {
                                width: 60rpx;
                                height: 60rpx;
                                border-radius: 30rpx;
                                margin-right: 20rpx;
                            }
                            
                            .info {
                                flex: 1;
                                
                                .name {
                                    font-size: 28rpx;
                                    color: #333;
                                    margin-bottom: 6rpx;
                                }
                                
                                .time {
                                    font-size: 24rpx;
                                    color: #999;
                                }
                            }
                        }
                        
                        .rating {
                            margin-bottom: 20rpx;
                        }
                        
                        .content {
                            font-size: 24rpx;
                            color: #666;
                            line-height: 1.6;
                        }
                    }
                }
            }
        }
    }
}
</style> 